<template>
    <div class="project-page">
        <student-header/>

        <main>
            <n-scrollbar style="max-height: 90vh" trigger="none">
                <div class="task" v-for="task in taskArray">
                    <h3>{{ task.name }}</h3>
                    <div class="info">
                        <span>任务内容: </span>
                        <div style="white-space: pre-wrap">
                            <n-scrollbar style="max-height: 130px; padding-right: 10px;" trigger="none">
                                {{ task['task_describe'] }}
                            </n-scrollbar>
                        </div>
                    </div>
                    <div class="resources">
                        <span>任务资源: </span>
                        <a v-for="resources in task.children" :href="resources.url">
                            {{ resources.name }}
                        </a>
                    </div>
                    <button class="pointer" @click="enterTask(task.id,task.project_id)">执行任务</button>
                </div>
            </n-scrollbar>
        </main>
    </div>
</template>

<script setup>

import StudentHeader from "@/components/header/StudentHeader.vue";
import {useRoute} from "vue-router";
import workApi from "@/http/workApi";
import router from "@/router";

const route = useRoute()
const taskArray = ref([])

onMounted(() => {
    const id = route.query.projectId
    workApi.get("/student/task", {
        params: {
            id
        }
    }).then((res) => {
        console.log(res.data)
        taskArray.value = res.data
    })
})

const enterTask = (id, project_id) => {
    router.push({
        name: "Execute",
        query: {
            projectId: project_id,
            taskId: id
        }
    })
}
</script>

<style scoped lang="less">
.project-page {
    height: 100vh;
    background-color: #1C1F2C;

    main {
        .task {
            position: relative;
            width: 1087px;
            height: 334px;
            margin: 0 0 5vh 10vw;
            color: #5D657E;
            background-color: #242737;

            h3 {
                position: absolute;
                top: 25px;
                left: 127px;
                color: white;
            }

            .info {
                position: absolute;
                top: 67px;
                left: 127px;
                width: 820px;
                height: 138px;
            }

            .resources {
                position: absolute;
                top: 240px;
                left: 127px;

                a {
                    color: #087CD9;
                }
            }
            button{
                position: absolute;
                top: 270px;
                left: 800px;
                width: 160px;
                height: 40px;
                border: solid 1px #087CD9;
                border-radius: 10px;
                color: #087CD9;
            }
        }
    }
}
</style>